<template>
  <el-dialog :title="imgName" :center="true" :visible.sync="visible" :modal-append-to-body="true" :append-to-body="true" @close="closeEvent" :lock-scroll="true" custom-class="image-dialog" @open="initDialog">
    <img v-if="!viewError" :src="imgSrc" @error="picError"/>
    <div v-if="viewError">无法预览，路径错误或者非图片格式</div>
  </el-dialog>
</template>
<script>
  export default {
    props: {
      visible: {
        type: Boolean
      },
      src: {
        type: String,
        default: ''
      },
      fileName: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        viewError: false,
        imgSrc: '',
        imgName: ''
      };
    },
    methods: {
      picError() {
        this.viewError = true;
      },
      initDialog() {
        this.$nextTick(() => {
          this.viewError = false;
          this.imgSrc = this.src;
          this.imgName = this.fileName;
        });
      },
      closeEvent() {
        this.$emit('close');
      }
    }
  };
</script>
<style  type="text/scss" lang="scss">
  .image-dialog {
    &.el-dialog .el-dialog__body {
      text-align: center;
    }
    img {
      max-width: 100%;
    }
  }
</style>